<template>
	<view class="auth_login">
		<view class="self_head">
			<view class="left_icon" @click="$nav('',3)"><uni-icons color="#fff" size="20" type="arrowleft"></uni-icons></view>
			<view class="title"><image src="../../static/auth/logo.png" mode="aspectFit"></image></view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="input_main app">
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
			<view class="input_main">
		<!-- #endif -->
			<view class="title">找回密码</view>
			<view class="item">
				<view class="lab"><uni-icons type="person-filled" size="20" color="#333"></uni-icons></view>
				<view class="input">
					<input type="text" v-model="params.phone" placeholder="请输入您的手机账号" />
				</view>
			</view>
			<view class="item">
				<view class="lab"><uni-icons type="locked-filled" size="20" color="#333"></uni-icons></view>
				<view class="input">
					<input type="password" v-model="params.password" placeholder="请输入您的新密码" />
				</view>
			</view>
			<view class="item">
				<view class="lab"><uni-icons type="locked-filled" size="20" color="#333"></uni-icons></view>
				<view class="input">
					<input type="password" v-model="params.re_password" placeholder="请再次输入您的新密码" />
				</view>
			</view>
			<view class="item">
				<view class="lab"><uni-icons type="email-filled" size="20" color="#333"></uni-icons></view>
				<view class="input sms">
					<input type="number" v-model="params.code" placeholder="验证码" />
					<view :class="wait?'send ck':'send'" @click="sendSms()">{{text}}</view>
				</view>
			</view>
			<view class="login_btn" @click="login">修改密码</view>
			
			<view class="other">
				<text @click="$nav('/pages/auth/login')">已有账号，立即登录</text>
			</view>
		
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{},
				num:0,
				text:'发送验证码',
				wait:false,
			};
		},
		onLoad() {
		},
		methods:{
			sendSms(){
				if(this.wait){
					return this.$toast('请不要频繁发送短信')
				}
				this.$http(this.$api.sendSms,{phone:this.params.phone,name:'forget_password'}).then(res=>{
					if(res.code==200){
						this.num = 60;
						this.wait = true;
						let obj = setInterval(()=>{
							this.num--
							this.text = this.num+'s';
							if(this.num<1){
								clearInterval(obj);
								this.num = 0
								this.text = '发送验证码';
							}
						},1000);
					}else{
						return this.$toast(res.msg)
					}
				})
			},
			login(){
				if(this.params.password != this.params.re_password){
					return this.$toast('两次密码输入不一致');
				}
				this.$http(this.$api.forgetPassword,this.params).then(res=>{
					if(res.code == 200){
						uni.$emit('users')
						uni.setStorageSync('token',res.data.token);
						uni.switchTab({
							url:'/pages/index/self'
						})
					}else{
						return this.$toast(res.msg);
					}
				})
			}
		},
	}
</script>

<style lang="scss">
.auth_login{
	position: relative;
	
	.input_main{
		.other{
			display: flex;
			color:#999;
			font-size: $uni-font-size-base;
			margin-top: 20rpx;
			text{
				&:last-child{text-align: right;}
				flex: 1;
			}
		}
		.login_btn{
			width: 100%;
			text-align: center;
			border-radius: 10rpx;
			background: $linear-gradient;
			color:#fff;
			line-height: 80rpx;
		}
		.item{
			margin-bottom: 60rpx;
			border-bottom: 1px solid #eee;
			padding-bottom: 15rpx;
			display: flex;
			.lab{flex: 0 0 80rpx;}
			.input{
				&.sms{
					display: flex;
					.send{
						flex: 0 0 140rpx;border-left: 1px solid #eee;padding-left: 20rpx;padding-right: 20rpx;text-align: center;
						&.ck{
							color:#999;
						}
					}
				}
				font-size: $uni-font-size-base;flex: 1;
			}
		}
		.title{
			margin-bottom: 80rpx;
			font-size: 42rpx;
			font-weight: bold;
			border-bottom: 6rpx solid $uni-color-error;
			width: 190rpx;
			padding-bottom: 20rpx;
		}
		background: #fff;
		position: relative;
		z-index:300;
		width:90%;
		margin:-100rpx auto 0 auto;  
		min-height: 400rpx;
		border-radius: 10rpx;
		padding: 30rpx 30rpx 80rpx 30rpx;
		box-sizing: border-box;
		&.app{margin-top: -90rpx;  }
	}
	.self_head{
		.title{
			text-align: center;
			padding-top: 140rpx;
			image{width: 400rpx;height: 130rpx;}
			display: block;
		}
		.desc{
			text-align: center;
			margin-top: 30rpx;
		}
		background: $linear-gradient;
		padding-top: calc(var(--status-bar-height));
		min-height: 400rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-radius: 0 0 30% 30%;
		color:#fff;
		.left_icon{
			position: absolute;background: rgba(#000, 0.4);border-radius: 50%;width: 70rpx;height: 70rpx;text-align: center;box-sizing: border-box;
			padding-top: 12rpx;
			left:40rpx;top:calc(var(--status-bar-height) + 40rpx);
		}
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
	}
}

</style>
